<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    v-bind="_attrs"
    class="modal-box"
    :class="{'fullscreen':innerFullscreen}"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :getter="12">
          <a-col :span="8">
            <a-form-item label="表名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableName', {rules: [{required: true, message: '请输入表名'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="表描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableTxt', {rules: [{required: true, message: '请填写描述'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="表类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableType', {rules: [{required: true, message: '请选择类型'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :getter="12">
          <a-col :span="8">
            <a-form-item label="表单分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableName', {rules: [{required: true, message: '请输入表名'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="主键策略" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableTxt', {rules: [{required: true, message: '请填写描述'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="查询模式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableType', {rules: [{required: true, message: '请选择类型'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :getter="12">
          <a-col :span="8">
            <a-form-item label="主题模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableName', {rules: [{required: true, message: '请输入表名'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="表单风格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableTxt', {rules: [{required: true, message: '请填写描述'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="滚动条" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tableType', {rules: [{required: true, message: '请选择类型'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :getter="12">
          <a-col :span="8">
            <a-form-item label="显示复选框" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['tableName', {rules: [{required: true, message: '请输入表名'}]}]" :options="typeList" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否分页" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['tableTxt', {rules: [{required: true, message: '请填写描述'}]}]" :options="typeList"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否树" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['tableType', {rules: [{required: true, message: '请选择类型'}]}]" :options="typeList" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="数据库属性" key="1">
          <div class="table-operator">
            <a-button @click="addField" icon="plus" type="primary">新建</a-button>
          </div>
          <database-props
            :datasource.sync="tableData"
          ></database-props>
        </a-tab-pane>
        <a-tab-pane tab="页面属性" key="2">

        </a-tab-pane>
      </a-tabs>

    </a-spin>
    <template slot="footer" >
      <div
        v-show="editable || addable"
      >
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import { FormMixin } from '@/mixins/FormMixin'
import databaseProps from './comps/database-props'
const typeList = [
  {
    label: '是',
    value: '1'
  },
  {
    label: '否',
    value: '0'
  }
]
export default {
  name: 'Form',
  mixins: [FormMixin],
  components: {
    databaseProps
  },
  props: {
    fullscreen: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    _attrs () {
      const attrs = { ...this.$attrs }
      // 如果全屏就将宽度设为 100%
      if (this.innerFullscreen) {
        attrs['width'] = '100%'
      }
      return attrs
    }
  },
  data () {
    return {
      innerFullscreen: this.fullscreen,
      labelCol: {
        span: 7
      },
      wrapperCol: {
        span: 15
      },
      // 判断是否存在
      typeList,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      tableData: []
    }
  },
  methods: {
    addField () {
      this.tableData.push({
        id: this.tableData.length + 1,
        dbFieldName: '',
        dbFieldTxt: '',
        dbFieldNameOld: '',
        dbIsKey: '',
        dbIsNull: '',
        dbType: '',
        dbLength: '',
        dbPointLength: '',
        dbDefaultVal: ''
      })
    },
    edit (id, type) {
      this.visible = true
    },
    handleOk () {
    },
    callback (key) {

    }
  }
}
</script>

<style lang="less">
.modal-box{
  &.fullscreen {
     top: 0 !important;
     left: 0;
     padding: 0;
     height: 100vh;

    & .ant-modal-content {
      height: 100vh;
      border-radius: 0;

      & .ant-modal-body {
        /* title 和 footer 各占 55px */
        height: calc(100% - 55px - 55px);
        overflow: auto;
      }
    }

  }
}
</style>
